<template>
  <!-- 订单状态 -->
  <div id="main"></div>
</template>
<script>
import { onMounted, inject } from "vue";
import { number } from "echarts";
export default {
  props: {
    // 已完成
    okOrderNumber: {
      type: Number,
      default: 0,
    },
    // 待抢单
    dontAnswerSheetNumber: {
      type: Number,
      default: 0,
    },
    // 进行中
    inServiceNumber: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    console.log(props, "接收的数据是-----------");

    const echarts = inject("echarts");
    let chartInstance = null;
    var data = [
      {
        name: "待抢单",
        value: props.dontAnswerSheetNumber,
      },
      {
        name: "进行中",
        value: props.inServiceNumber,
      },
      {
        name: "已完成",
        value: props.okOrderNumber,
      },
    ];
    // console.log(data, "订单数据");
    var arrName = getArrayValue(data, "name");
    var arrValue = getArrayValue(data, "value");
    var sumValue = eval(arrValue.join("+"));
    var objData = array2obj(data, "name");
    var optionData = getData(data);
    function getArrayValue(array, key) {
      var key = key || "value";
      var res = [];
      if (array) {
        array.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    }

    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    function getData(data) {
      var res = {
        series: [],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
        res.series.push({
          name: "",
          type: "pie",
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["30%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
            },
            {
              value: sumValue - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: "",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["30%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: "#D8D8D8", //剩余背景色
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
            {
              value: 2.5,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
      }
      return res;
    }

    // 待抢单、进行中、已完成echarts图
    const initEcharts = () => {
      chartInstance = echarts.init(document.getElementById("main"), "chalk");
      // 绘制图表
      chartInstance.setOption({
        title: {
          text: "订单状态",
        },
        legend: {
          show: true,
          icon: "circle",
          top: "center",
          left: "65%",
          data: arrName,
          width: 50,
          padding: [0, 5],
          itemGap: 25,
          formatter: function (name) {
            return (
              "{title|" +
              name +
              "}\n{value|" +
              objData[name].value +
              "}  {title|项}"
            );
          },

          textStyle: {
            rich: {
              title: {
                fontSize: 17,
                lineHeight: 15,
                color: "#585858",
              },
              value: {
                fontSize: 16,
                lineHeight: 20,
                color: "#2a9d8f", //右边字体颜色
              },
            },
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a}{b}:{c}({d}%)",
        },
        color: ["rgb(24, 183, 142)", "rgb(1, 179, 238)", "rgb(22, 75, 205)"],
        // 右侧显示区域
        grid: {
          top: "16%",
          bottom: "53%",
          left: "30%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#2a9d8f", //显示百分比的字体颜色
                fontSize: 16,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      });
      screenAdapter(chartInstance);
    };
    const screenAdapter = () => {
      const adapterOption = {};
      chartInstance.setOption(adapterOption);
      chartInstance.resize();
    };

    onMounted(() => {
      // 初始化图表
      initEcharts();
      // 适配图表
      screenAdapter();
      window.addEventListener("resize", screenAdapter);
    });
    return {};
  },
};
</script>
<style scoped lang="less">
#main {
  width: 100%;
  // height: 300px;
  height: 100%;
}
</style>
